<template>
  
     <el-form  
      ref="productInfoForm" 
      :model="value" 
      :rules="productInfoRules"
      label-width="150px" 
      style="width:600px;">
          
          <el-form-item label="商品分类" prop="productCategoryId">
             <el-cascader
                v-model="productCateValue"
                :options="productCateOptions"
                :props="{ expandTrigger: 'hover' }"
                @change="handleProductCateChange">
              </el-cascader>
          </el-form-item>

          <el-form-item label="商品名称" prop="name">
              <el-input v-model="value.name"></el-input>
          </el-form-item> 

          <el-form-item label="副标题" prop="subTitle">
              <el-input v-model="value.subTitle"></el-input>
          </el-form-item> 

          <!-- <el-form-item label="商品品牌" prop="brandId">
              <el-select v-model="value.brandId" placeholder="请选择商品品牌" @change="handleBrandChange">
                <el-option v-for="item in brandOptions"  :key="item.value" :label="item.label" :value="item.value"></el-option> 
              </el-select>
            </el-form-item> -->


            <!-- <el-form-item label="商品介绍">
              <el-input type="textarea" :rows="4" placeholder="请输入商品介绍" v-model="value.productIntro"></el-input>
            </el-form-item> -->

            <el-form-item label="商品货号" prop="productSn">
              <el-input v-model="value.productSn"></el-input>
            </el-form-item> 
 
            <el-form-item label="商品售价" prop="price">
              <el-input v-model="value.price"></el-input>
            </el-form-item>

              <el-form-item label="市场价" prop="price">
              <el-input v-model="value.originalPrice"></el-input>
            </el-form-item>

            <el-form-item label="商品库存" prop="store">
              <el-input v-model="value.store"></el-input>
            </el-form-item>

            <!-- <el-form-item label="计量单位" prop="unit">
              <el-input v-model="value.unit"></el-input>
            </el-form-item>

            <el-form-item label="商品重量" prop="weight" >
              <el-input v-model="value.weight" style="width:300px;margin-right: 15px;"></el-input>
              <span>克</span>
            </el-form-item> -->

            <el-form-item label="排序" prop="sort">
              <el-input v-model="value.sort"></el-input>
            </el-form-item>

          <el-form-item> 
           <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步,填写商品促销</el-button>
          </el-form-item> 

     </el-form>    
 
</template>

<script>
  
  import {getCategoryWithChildren} from '@/api/categoryApi'
export default {
  name: 'productInfoDetail', 
  props:{
    value:Object,
    // 判断是编辑 还是添加
    isUpdate:{
      type:Boolean,
      default:false
    }
  }, 
  computed:{
    // 商品编号
    productId(){
      return this.value.id
    }
  },
  watch:{
    // 在 编辑状态下 监视是否有 id
    productId(newValue){
      // console.log(newValue); 
      if(!this.isUpdate) return 
      if(newValue === undefined || newValue === null || newValue === 0) return
      this.handleEdit()
    }
  },
  data(){
    return {  
      productInfoRules:{
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
          ],
          subTitle: [
            { required: true, message: '请输入商品的副标题', trigger: 'blur' },
            { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
          ],
          productCategoryId:[
            { required: true, message: '请输选择商品的分类', trigger: 'blur' },
          ]
      },
      // 选中分类的数据
      productCateValue:[],
      // 分类的数据
      productCateOptions:[] 
    }
  },
  created(){  
    getCategoryWithChildren().then(res=>{ 
      if(res.status === 1){
        // console.log(res.data); 
        let listArr = res.data;
        this.productCateOptions = [];
        for(let i=0; i< listArr.length;i++){
          let children = [];
          if(listArr[i].children !=null && listArr[i].children.length > 0){
            for(let j=0;j< listArr[i].children.length;j++){
              children.push({
                value:listArr[i].children[j].id,
                label:listArr[i].children[j].name
              })
            } 
          } 
          children = children.length > 0 ? children : null;
          this.productCateOptions.push({
              value:listArr[i].id,
              label:listArr[i].name,
              children
          })
        }
      }
     
    })
  },
  methods:{
    
    // 处理 编辑状态下的业务
    handleEdit(){
      if(this.value.productCategoryId != null){
        // 处理有二级的情况
        if(this.value.cateParentId && this.value.cateParentId !== 0){
          this.productCateValue.push(this.value.cateParentId) 
        }  
        this.productCateValue.push(this.value.productCategoryId) 
        
      }
    },

    handleNext(formName){
      this.$refs[formName].validate((valid)=>{
        if(valid){ 
          this.$emit('nextStep')
        }else{
          this.$message.warning('请把内容填写完整')
          return false
        } 
      })
    
    },
    handleProductCateChange(value) {
      if(value.length == 1){ // 一级
        this.value.productCategoryId = value[0]
        this.value.productCategoryName = this.getCateNameById(value[0])
      }else if(value.length == 2){ // 二级
        this.value.productCategoryId = value[1]
        this.value.productCategoryName = this.getCateNameById(value[1])
      } 
    },
    // 根据id 获取 分类 名称
    getCateNameById(id){
      let name = null, pco = this.productCateOptions;
      for(let i=0;i<pco.length;i++){
        let children = pco[i].children;
        if(children){ //  二级
          for(let j= 0;j<pco[i].children.length;j++){
              if(pco[i].children[j].value == id){
                name = pco[i].children[j].label;
                return name;
              }
          }

        }else{ //  一级
            if(pco[i].value == id){
              name = pco[i].label;
              return name;
            }
        }
      }
      return name;
    }
    
  }
}
</script>

<style lang="less" scoped>
 
</style>
